<template>
  <div class="transfer-v2">
    <div class="leftTable">
      <div style="padding: 10px; height: 34px; padding-top: 0">
        <span v-if="cp"> 从</span> {{ cp }}
      </div>
      <!-- 度尺图 -->
      <a-row
        v-if="showSize && sizeLineFilesLeft.length"
        align="middle"
        type="flex"
      >
        <a-checkbox
          :disabled="sizeLineFilesRight?.length > 0"
          style="margin-right: 10px"
          v-model="sizeLineFileChecked"
        />
        <oss-upload
          small
          v-model="sizeLineFilesLeft"
          :disabled="true"
          list-type="picture-card"
        />
      </a-row>

      <a-table
        size="small"
        row-key="id"
        :row-selection="rowSizeSelection"
        :pagination="false"
        :scroll="{ x: '100%', y: 400 }"
        :columns="sizeLeftColumns"
        :data-source="sizeLeftTableData"
      >
        <template v-for="item in sizeCodeList" :slot="item">
          <a-checkbox
            :key="'left' + item"
            :value="item"
            :checked="checkSizeCodes.includes(item)"
            @change="checkSizeChange"
          >
            {{ item }}
          </a-checkbox>
        </template>
        <template v-if="isCrop" slot="img" slot-scope="text">
          <oss-upload
            v-model="text.ossList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
        <template v-if="isCrop" slot="skeImg" slot-scope="text">
          <oss-upload
            v-model="text.sewingImgList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
      </a-table>
    </div>
    <div class="operation">
      <a-button type="primary" :disabled="disMoveBtn" @click="moveIn">
        移入
        <a-icon type="double-right" />
      </a-button>
      <a-button
        type="primary"
        style="margin-top: 20px"
        :disabled="disMoveLeftBtn"
        @click="moveOut"
      >
        移出
        <a-icon type="delete" />
      </a-button>
    </div>
    <div class="rightTable">
      <div
        style="
          padding: 10px;
          line-height: 24px;
          text-align: right;
          padding-top: 0;
        "
      >
        复制到 {{ currentCp }}
      </div>
      <!-- 度尺图 -->
      <a-row v-if="showSize" align="middle" type="flex">
        <a-checkbox
          v-if="sizeLineFilesRight.length"
          style="margin-right: 10px"
          v-model="sizeLineFileRightChecked"
        />
        <oss-upload
          small
          v-model="sizeLineFilesRight"
          :disabled="true"
          list-type="picture-card"
        />
      </a-row>
      <a-table
        size="small"
        row-key="id"
        :row-selection="rowSizeSelection1"
        :pagination="false"
        :scroll="{ x: '100%', y: 400 }"
        :columns="sizeRightColumns"
        :data-source="sizeRightTableData"
      >
        <template v-if="isCrop" slot="img" slot-scope="text">
          <oss-upload
            v-model="text.ossList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
        <template v-if="isCrop" slot="skeImg" slot-scope="text">
          <oss-upload
            v-model="text.sewingImgList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
export default {
  props: {
    cp: {
      type: String,
      default: null
    },
    skc: {
      type: String,
      default: null
    },
    sizeColumns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    sizeCodeList: {
      type: Array,
      default: () => []
    },
    showSize: {
      type: Boolean,
      default: false
    },
    isCrop: {
      type: Boolean,
      default: false
    },
    sizeLineFiles: {
      type: Array,
      default: () => []
    }
  },
  inject: ['parentCP'],
  data() {
    return {
      currentCp: this.parentCP() || this.$route.query.cp,
      sizeLeftColumns: this.sizeColumns,
      sizeRightColumns: this.sizeColumns,
      sizeLineFilesLeft: this.sizeLineFiles || [],
      sizeLeftTableData: [],
      sizeRightTableData: [],
      sizeLineFilesRight: [],
      checkSizeCodes: [],
      sizeSelectedRowKeys: [],
      sizeSelectedRows: [],
      sizeDisabledRowKeys: [],
      sizeSelectedRowKeys1: [],
      sizeSelectedRows1: [],
      sizeLineFileChecked: false,
      sizeLineFileRightChecked: false
    }
  },
  computed: {
    rowSizeSelection() {
      return {
        selectedRowKeys: this.sizeSelectedRowKeys,
        getCheckboxProps: record => ({
          props: {
            disabled: this.sizeDisabledRowKeys.includes(record.id)
          }
        }),
        onChange: (selectedRowKeys, selectedRows) => {
          this.sizeSelectedRowKeys = selectedRowKeys
          this.sizeSelectedRows = selectedRows
        }
      }
    },
    rowSizeSelection1() {
      return {
        selectedRowKeys: this.sizeSelectedRowKeys1,
        // getCheckboxProps: record => ({
        //   props: {
        //     disabled: this.sizeDisabledRowKeys.includes(record.id)
        //   }
        // }),
        onChange: (selectedRowKeys, selectedRows) => {
          this.sizeSelectedRowKeys1 = selectedRowKeys
          this.sizeSelectedRows1 = selectedRows
        }
      }
    },
    disMoveBtn() {
      let flag = false
      if (this.sizeSelectedRowKeys.length) {
        const disall = this.sizeSelectedRowKeys.every(item =>
          this.sizeDisabledRowKeys.includes(item)
        )
        if (disall) {
          flag = true
        } else {
          flag = false
        }
      } else {
        flag = true
      }
      if (this.sizeLineFileChecked) {
        flag = false
      }
      return flag
    },
    disMoveLeftBtn() {
      return (
        // state.sizeLeftTableData.length === state.sizeSelectedRows1.length ||
        (!this.sizeSelectedRowKeys1.length ||
          !this.sizeRightTableData.length) &&
        !this.sizeLineFileRightChecked
      )
    }
  },
  watch: {
    sizeLineFiles(val) {
      if (!this.showSize) return
      this.sizeLineFilesLeft = val.filter(item => item.ossUrl)
    },
    checkSizeCodes(val) {
      if (!this.showSize) return
      this.sizeRightColumns = [
        {
          title: '代号',
          dataIndex: 'measurementChartCode',
          key: 'measurementChartCode',
          width: 60
        },
        { title: '部位', dataIndex: 'position', key: 'position', width: 250 },
        ...(val?.map(_ => {
          return { title: _, key: _, dataIndex: _, width: 80 }
        }) || [])
      ]
    },
    sizeColumns(val) {
      this.sizeLeftColumns = val
      this.checkSizeCodes = [...this.sizeCodeList]
    },
    data() {
      this.sizeLeftTableData = cloneDeep(this.data)
    },
    sizeSelectedRowKeys(val) {
      console.log(val, 'rowkeys')
    }
  },
  methods: {
    reset() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    checkSizeChange(e) {
      const { checked, value } = e.target
      if (checked) {
        this.checkSizeCodes.push(value)
      } else {
        const index = this.checkSizeCodes.indexOf(value)
        index !== -1 && this.checkSizeCodes.splice(index, 1)
      }
    },
    moveIn() {
      this.sizeRightTableData = cloneDeep(this.sizeSelectedRows)
      this.sizeDisabledRowKeys = this.sizeRightTableData.map(item => item.id)
      // 重新渲染用以将已选中置灰
      this.sizeLeftTableData = cloneDeep(this.sizeLeftTableData)
      this.moveInSizeLine()
    },
    moveOut() {
      // state.sizeSelectedRowKeys = []
      const moveoutArr = this.sizeRightTableData.filter(
        item => !this.sizeSelectedRowKeys1.includes(item.id)
      )

      this.sizeRightTableData = cloneDeep(moveoutArr)
      this.sizeSelectedRowKeys = this.sizeRightTableData.map(item => item.id)
      this.sizeDisabledRowKeys = this.sizeRightTableData.map(item => item.id)
      // // 重新渲染用以将已选中置灰
      this.sizeLeftTableData = cloneDeep(this.sizeLeftTableData)
      this.sizeSelectedRowKeys1 = []
      this.moveOutSizeLine()
    },
    /**
     * 移入度尺图
     */
    moveInSizeLine() {
      if (this.showSize && this.sizeLineFileChecked) {
        this.sizeLineFilesRight = cloneDeep(this.sizeLineFiles)
      }
    },
    /**
     * 移出度尺图
     */
    moveOutSizeLine() {
      this.sizeLineFileRightChecked = false
      this.sizeLineFileChecked = false
      this.sizeLineFilesRight = []
    },
    /**
     * 获取提交数据集合
     */
    getSubmitData() {
      return {
        sizeLineFilesRight: this.sizeLineFilesRight || [],
        sizeRightTableData: this.sizeRightTableData || [],
        checkSizeCodes: this.checkSizeCodes || []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.transfer-v2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  height: 500px;
  margin-top: 20px;
}
.leftTable,
.rightTable {
  width: 45%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
}
.operation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
